@import "../static/less/variable.less";

.tabbar {
  height: 50PX;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1PX solid #eee;
  box-sizing: border-box;
  background-color: #3d3d3d;

  .tabbar-item {
    width: calc(100% / 3);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12PX;
    color: #fff;

    &.active {
      color: #fedb18;

      .icon {
        display: none;

        &.icon-active {
          display: block;
        }
      }
    }

    .index-icon {
      width: 45PX;
      height: 45PX;
      border-radius: 50%;
      background-color: #3d3d3d;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -25PX;

      .index-icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40PX;
        height: 40PX;
        border-radius: 50%;
        background: linear-gradient(146deg, @start-yellow 17%, @end-yellow 86%);

        .icon {
          display: block;
        }
      }
    }
  }
}